<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div
    class="page-content"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="finish"
    infinite-scroll-distance="16"
  >
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <tarbar :list="list" />
      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th>会员名</th>
            <th>下线层级</th>
            <th>项目名称</th>
            <th>返佣金额</th>
            <th>投资时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in dataList" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.le}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>{{item.create_time}}</td>
          </tr>
          <tr v-if="!dataList.length">
            <td colspan="5">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <commonFooter></commonFooter>
    </van-pull-refresh>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonFooter, tarbar } from "common";
import { userRecommAwardApi } from "@/api/user";
import myMixin from "./listMixin";
export default {
  name: "recharge",
  mixins: [myMixin],
  components: {
    commonFooter,
    tarbar
  },
  methods: {
    async onRefresh() {
      this.finish = false;
      this.page = 1;
      this.dataList = [];
      await this.loadMore();
      this.isLoading = false;
    },
    loadMore() {
      if (this.finish) {
        return;
      }
      this.finish = true;
      return userRecommAwardApi({ page: this.page }).then(res => {
        if (res.code == 200) {
          this.list[0].text = res.data.total;
          this.list[1].text = "¥" + res.data.price;
          if (res.data.data.length > 0) {
            this.dataList = [...this.dataList, ...res.data.data];
          }
          if (res.data.data.length < 15) {
            this.finish = true;
          } else {
            setTimeout(() => {
              this.finish = false;
              this.page++;
            }, 500);
          }
        }
      });
    }
  },
  mounted() {
    // this.loadMore();
  },
  data() {
    return {
      title: "推广记录",
      page: 1,
      dataList: [],
      isLoading: false,
      list: [
        { title: "推荐好友人数", text: "0" },
        { title: "已收返佣金额", text: "¥0" }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  margin: 0.5rem 0;
  font: 0.35rem/1.5 "Microsoft YaHei";
  color: #333;
  background: #fff;
  thead {
    background: #f6f4f5;
  }
  td,
  th {
    min-width: 0.2rem;
    border: 1px #ddd solid;
    max-width: 5rem;
    padding: 0.2rem 0;
    word-wrap: break-word;
    word-break: break-all;
  }
}
/deep/ .van-pull-refresh {
  overflow: initial;
  min-height: 100%;
}
</style>